
<div style="padding: 15px;">
    <table id="projectTable" lay-filter="projectTable"></table>
</div>
<script type="text/javascript">
    layui.use('table', function() {
        let table = layui.table;
        let Data;
        table.render({
            elem: '#projectTable'
            , url: '/project/list2'
            , cols: [
                [
                    {field: 'projectName', title: '项目名称', align: 'center'}
                    , {field: 'creatDate', title: '建立时间', align: 'ceter'}
                    , {field: 'endDate', title: '结束时间', align: 'center'}
                    , {field: 'projectType', title: '类型',templet: function(res){
                        return '<em>'+res.projectType+'级</em>';
                    }, align: 'center'}
                    , {field: '', title: '状态',templet: function(res){
                        return res.projectState === 1 ? '完成':'进行中'
                    }, align: 'center'}
                    , {field: 'projectStepState', title: '进度', align: 'center'} //单元格内容水平居中

                    , {field: '', title: '文件',templet: function(res){
                        return '<a class="layui-btn layui-btn-xs" target="_blank" href="http://'+res.projectAddress+'">下载</a>';
                    }, align: 'center'}
                    , {field: '', title: '总价', event: 'price',templet: function(res){
                        return '<a class="layui-btn layui-btn-xs">'+res.projectTotalPrice+'</a>';
                    }, align: 'center'}
                    , {field: 'clientId', title: '客户信息', event: 'client',templet: function(res){
                        return '<a class="layui-btn layui-btn-xs">客户</a>';
                    }, align: 'center'}
                ]
            ]
            , page: true
        });

        table.on('tool(projectTable)', function (obj) { //tool是工具条事件名，参数是table原始容器的lay-filter属性值
            let layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'price'){
                const model =obj.data.modelPrice;
                const render = obj.data.renderPrice;
                const last = obj.data.lastPrice;
                const html =
                    '<table class="layui-table" lay-size="sm"> ' +
                    '<thead><tr><th>项目阶段</th><th>单价</th></tr></thead><tbody>'+
                    '<tr><td>模型</td><td>'+model+'</td></tr>'+
                    '<tr><td>渲染</td><td>'+render+'</td></tr>'+
                    '<tr><td>后期</td><td>'+last+'</td></tr>'+
                    '</tbody></table>';
                layer.open({
                    type: 1,
                    title: '单价明细',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    content: html
                });
            }
            if (layEvent === 'client') {
                layer.open({
                    type: 2,
                    title: '客户信息',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['550px', '600px'],
                    content: '/router/clientInfo/'+obj.data.clientId,
                });
            }
        });
    });
</script>